import { Row, Col } from 'antd'
import './grid.css'
const AntdGrid = () => {
    return (<div>
    {/* 分為三等份 */}
     <Row>
        <Col span={8}><div className="bg">1</div></Col>
        <Col span={8}><div className="bg">1</div></Col>
        <Col span={8}><div className="bg">1</div></Col>
     </Row>
     {/* 两边靠边  */}
     <Row>
        <Col span={8}><div className="bg">1</div></Col>
        {/* <Col span={8}><div className="bg">1</div></Col> */}
        <Col span={8} offset={8}><div className="bg">1</div></Col>
     </Row>
     {/* gutter */}
     <Row gutter={20}>
        <Col span={8}><div className="bg">1</div></Col>
        <Col span={8}><div className="bg">1</div></Col>
        <Col span={8}><div className="bg">1</div></Col>
     </Row>
     {/* 根据特定UI宽度，划分对应的分数 */}
     <Row style={{width: '600px',backgroundColor:'green'}}>
        <Col span={8}><div className="bg">left200px</div></Col>
        <Col span={16}><div className="bg">right</div></Col>
     </Row>
     {/* 作业-总宽度为800px,子元素有两个，左右结构 ？？？ */}
    
    </div> );
}
 
export default AntdGrid;